<template>
    <div>
        <h1>Parent</h1>  
        <h3> {{ msg }} </h3> 
        <h5>Vuex<span style="color: red"> {{ count }} </span></h5>
        <h5>getters<span style="color: blue"> {{ doubleCount }} </span></h5>
        <button @click="add">增加</button>
        <!-- 调用 v-bind 可以简写： -->
        <m-child msg="from Parent msg" @showMsg="showMsg" ref='child' v-bind="$attrs"></m-child> 
    </div>
</template>

<script>
//引入
import MChild from './Child'
import { mapState, mapGetters } from 'vuex'
//注册
export default {
    // 在计算属性中写vuex
    // computed: {
    //     count() {
    //         return this.$store.state.count
    //     }
    // },

    //辅助函数引入vuex,映射vuex中的数据
    //使用 ... 对象展开运算符将此对象混入到外部对象中
    // computed: mapState({
    //     // 第一个count, 这个界面的参数名, 第二个count ,vuex中隐射的属性名
    //     count: 'count'
    // }),
     computed: {
         //使用 ... 对象展开运算符将此对象混入到外部对象中.把其他计算属性合并了, 就能一起使用了
         ...mapState({
            //  count: 'count'  为引入模块这么写
            // state.count.count第一个count是模块名, 第二个count 是属性
            count: state => state.count.count
         }),
        //  doubleCount() {
        //      return this.$store.getters.doubleCount
        //  }
        ...mapGetters([
            'doubleCount'
        ])
        // ...mapGetters({
        //     'double': 'doubleCount'
        // })   

    },



    data() {
        return {
            msg: ''
        }
    },
    //注册
   components: {
     MChild  
   },
   methods: {
       showMsg(val) {
           this.msg = val
       },
       add () {
           //触发同步的方法
           this.$store.commit('add')
        //出发action方法异步
        //    this.$store.dispatch('delayAdd')
       }
   },
   //通过children，获取子组件数据
   mounted () {
    //    console.log(this.$children[0].childMsg)
       console.log(this.$children[0]);
       console.log('ref',this.$refs.child)
   }        
}
</script>

<style scoped>

</style>